<template>
  <view :class="resultString === ''  ? 'page-box':'page-box page-box-position'">
    <view class="background-box"></view>
    <view class="personality-box">
      <image src="../../static/img/result_bg.png" class="personality-box-img"></image>
      <view class="tag-name" v-if="resObj.name">{{resObj.name}}</view>
      <view class="tag-data tag-data-1">{{resObj.tag[0] || '???'}}</view>
      <view class="tag-data tag-data-2">{{resObj.tag[1] || '???'}}</view>
      <view class="tag-data tag-data-3">{{resObj.tag[2] || '???'}}</view>
      <view class="tag-data tag-data-4">{{resObj.tag[3] || '???'}}</view>
    </view>

    <view class="content">
      <view class="details-position-box">
        <view class="details-box">
          <view class="background-box" v-if="resultString === ''">
            <view class="background-box-btn" @click="startAnswer">您还未答题，快去测试吧</view>
          </view>
          <view class="title">性格特点</view>
          <view class="data" v-if="resultString !== ''">{{resObj.character}}</view>
          <view class="data" v-else style="color: transparent;text-shadow: #111 0 0 3px;">你是一个热情洋溢、极富朝气、机敏、富于想象力得人，认为人生有很多的可能性。能很快地将事情和信息联系起来，然后很自信地根据自己的判断解决问题。常常依据他们自己的能力去即席成事, 而不是事先准备。</view>
        </view>
        <view class="details-box" v-if="resultString !== ''">
          <view class="title">适合职业</view>
          <view class="data-items" v-if="true">
            <view class="data-item" v-for="(item,index) in resObj.occupation" :key="index">{{item}}</view>
          </view>
          <view class="data-items" v-else>
            <view class="data-item" style="color: transparent;text-shadow: #111 0 0 3px;" v-for="(item,index) in occupationDefualtData" :key="index">{{item}}</view>
          </view>
        </view>
      </view>

      <view class="share-box" v-if="resultString !== ''">
        <view class="share-btn-box" @click="resetAnswer">
          <view class="icon">
            <image src="../../static/img/reset.png" class="img"></image>
          </view>
          <view class="data">重新答题</view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { resultBank28 } from '@/doc/questionBank'
const util = require('../../util/util.js')

export default {
  name: 'result',
  data() {
    return {
      resObj: {},
      resultString: '',
      openOccupationStatus: false,
      occupationDefualtData: [
        "信息服务业经理",
        "计算机程序员",
        "景观",
        "软件开发员",
        "律师助理",
        "消防员",
        "私人侦探",
        "药剂师"
      ],
      queryObj: {},
      payStatus: false
    }
  },
  onLoad(options) {
    this.queryObj = options
    this.payStatus = this.$store.state.payStatus
    this.init()
  },
  created () {

  },
  methods: {
    startAnswer() {
      uni.navigateTo({
        url: "../../pages/index/index"
      })
    },
    async init() {
      if(true) {
        let mbtiResultObj = this.$store.state.mbtiResultObj
        if (mbtiResultObj.store93 && mbtiResultObj.store93!="") {
          this.$store.commit('setResult', mbtiResultObj.store93)
        } else if (mbtiResultObj.store28 && mbtiResultObj.store28!="") {
          this.$store.commit('setResult', mbtiResultObj.store28)
        }
      }

      if(this.$store.state.result !== '') {
        this.resultString = this.$store.state.result
        this.resObj = resultBank28[this.resultString]
      }
      this.openOccupationStatus = this.$store.state.openOccupationStatus
    },
    async resetAnswer() {
      try {
        this.$store.commit('setMbtiResultObj', {})
        this.$store.commit('setResult', "")
        uni.redirectTo({
          url: "../../pages/index/index"
        })
      }
      catch (e) {
        console.log(e)
      }
    },
    onShareAppMessage() {
      let path = '/pages/index/index'
      return {
        path,
        templateId:'glo725gg2dj70ekjd0',
        success(res) {
          uni.hideShareMenu({
            success(res) {
              console.log(`showShareMenu 调用成功`);
            },
            fail(res) {
              console.log(`showShareMenu 调用失败`);
            },
          });
        },
        fail(err) {
          console.log(err);
        },
      };
    }
  }
}
</script>

<style lang="scss" scoped>
  .page-box {
    .background-box {
      position: absolute;
      top: 0rpx;
      left: 0rpx;
      right: 0rpx;
      bottom: 0rpx;
      background:linear-gradient(314deg,rgba(11,116,215,1) 0%,rgba(0,133,226,1) 100%);;
    }

    .personality-box {
      position: absolute;
      width: 100%;

      .personality-box-img {
        display: block;
        width: 100%;
        height: 600rpx;
      }

      .tag-name {
        position: absolute;
        top: 430rpx;
        left: 50%;
        margin-left: -140rpx;
        width:280rpx;
        height:80rpx;
        background:linear-gradient(270deg,rgba(255,209,0,1) 0%,rgba(255,234,0,1) 100%);
        box-shadow:0rpx -3rpx 15rpx 0rpx rgba(255,180,18,1);
        border-radius:40rpx;
        font-size:36rpx;
        font-weight:600;
        color:rgba(48,69,83,1);
        line-height:80rpx;
        text-align: center;
      }

      .tag-data {
        position: absolute;
        font-size:26rpx;
        font-weight:600;
        color:rgba(255,255,255,1);
      }
      .tag-data-1 {
        top: 168rpx;
        left: 192rpx;
      }

      .tag-data-2 {
        top: 205rpx;
        left: 532rpx;
      }

      .tag-data-3 {
        top: 493rpx;
        left: 620rpx;
      }

      .tag-data-4 {
        top: 347rpx;
        left: 80rpx;
      }
    }

    .content {
      position: relative;
      padding-top: 600rpx;

      .details-position-box {
        width: 100%;

        .details-box {
          position: relative;
          margin: 0 auto;
          padding: 95rpx 59rpx 41rpx 61rpx;
          width:680rpx;
          box-sizing: border-box;
          background:rgba(255,255,255,1);
          box-shadow:0rpx 8rpx 30rpx 0rpx rgba(48,140,205,0.5),0rpx 0rpx 30rpx 0rpx rgba(170,211,238,1);
          border-radius:15rpx;

          .background-box {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            background:rgba(255,255,255,.9);
            box-shadow:0px 8rpx 30rpx 0px rgba(48,140,205,0.5),0px 0px 30px 0px rgba(170,211,238,1);
            border-radius:15px;
            display: flex;
            align-items: center;
            justify-content: center;

            .background-box-btn {
              width:473rpx;
              height:100rpx;
              background:linear-gradient(270deg,rgba(0,150,255,1) 0%,rgba(60,179,255,1) 100%);
              border-radius:59rpx;
              font-size:30rpx;
              font-weight:500;
              color:rgba(255,255,255,1);
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            }
          }

          .title {
            position: absolute;
            top: 0px;
            left: 0px;
            width:192rpx;
            height:66rpx;
            background-color: #CEE8FA;
            border-radius:15rpx 0rpx 40rpx 0rpx;
            font-size: 28rpx;
            color:rgba(0,107,190,1);
            font-weight:500;
            line-height: 66rpx;
            text-align: center;
          }

          .data {
            font-size:26rpx;
            font-weight:400;
            color:rgba(97,97,97,1);
            line-height:40rpx;
          }

          .data-items {
            .data-item {
              font-size:30rpx;
              font-weight:500;
              color:rgba(97,97,97,1);
              line-height:60rpx;
              text-align: center;
            }
          }
        }

        .details-box:nth-child(2) {
          padding-top: 69rpx;
          margin-top: 42rpx;
        }
      }

      .share-box {
        padding: 62rpx 103rpx 0rpx 103rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .share-btn-box {
          font-size:30rpx;
          font-weight:500;
          color:rgba(255,255,255,1);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .icon {
            width: 100rpx;
            height: 100rpx;
            background:linear-gradient(270deg,rgba(0,150,255,1) 0%,rgba(60,179,255,1) 100%);
            overflow: hidden;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            .img {
              display: block;
              width: 40rpx;
              height: 40rpx;
            }
          }

          .data {
            padding-top: 10rpx;
          }
        }
      }
    }


    .details-btn-box {
      position: relative;

      ::v-deep .details-btn-box {
        padding: 60rpx 63rpx 65rpx 63rpx;
      }
    }

    .position-details-btn-box {
      position: absolute;
      left: 0rpx;
      right: 0rpx;
      bottom: 80rpx;
      z-index:99;

      ::v-deep .details-btn-box {
        padding: 0rpx 63rpx;
      }
    }
  }

  .page-box-position {
    position: relative;
  }
</style>
